<template>
  <div class="td-wrapper">
    <DataPicker @transferInputValue="addTodo"></DataPicker>
    <DataLister :todos="todos" @transferId="removeTodo"></DataLister>
  </div>
</template>

<script setup>
import { reactive, toRefs } from "vue";
import DataPicker from "@/components/DataPicker.vue";
import DataLister from "@/components/DataLister.vue";

const state = reactive({
  todos: [
    { id: 1, text: "js真简单", done: false },
    { id: 2, text: "vue3有脚就行", done: false },
    { id: 3, text: "react估计也就那样", done: false },
  ],
});
const { todos } = toRefs(state);
function addTodo(inputValue) {
  todos.value.push({ id: Date.now(), text: inputValue, done: false });
}
function removeTodo(id) {
  // todos.value = todos.value.filter(item=>item.id!==id);
  const thisItem = todos.value.find((item) => item.id === id);
  thisItem.done = !thisItem.done;
}
</script>

<style lang='scss'>
.td-wrapper {
  width: 600px;
  margin: 0 auto;

  ul,
  li {
    list-style: none;
  }
}
</style>